<% extends 'public/base.html'%>
<% block content %>
  <div class="content">
    <div class="cont w1000">
      <div class="title">
        <span class="layui-breadcrumb" lay-separator="|">
          <a href="/" <% if category_id==0 %>class="active"<% endif %>>全部</a>
          <% for category_item in category_list %>
          <a href="?catetory=<< category_item.id >>" <% if category_item.Id==category_id %>class="active"<% endif %>><< category_item.name >></a>
          <% endfor %>
        </span>
      </div>
      <div class="list-item" id="blog_item"></div>
      <div id="demo" style="text-align: center;"></div>
    </div>
  </div>
<% endblock %>
<% block script%>
      laypage.render({
        elem: 'demo'
        ,count: << blog_count >> //数据总数，从服务端得到
       ,jump: function(obj, first){
              $.ajax({
                url:"<< url_for('main.blogByPage') >>",
                data:{page:obj.curr,limit:obj.limit,category:<< category_id >>},
                dataType:'json',
                success:function (res) {
                    $('#blog_item').html("");
                    if(res.status==0){
                      $('#whisper-list').html('');
                      if(res.blog_count==0){
                        $('#blog_item').html('<blockquote class="layui-elem-quote">暂无相关博文</blockquote>');
                        $('#demo').hide();
                      }
                      else{
                          $('#demo').show();
                          $.each(res.data,function(index,item){
                             var html_data='<div class="item">\n' +
                                     '          <div class="layui-fluid">\n' +
                                     '            <div class="layui-row">\n' +
                                     '              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">\n' +
                                     '                <div class="img"><img src="'+item.imgSrc+'" alt=""></div>\n' +
                                     '              </div>\n' +
                                     '              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">\n' +
                                     '                <div class="item-cont">\n' +
                                     '                  <h3>'+item.title+'</h3>\n' +
                                     '                  <h5>'+item.categoryName+'</h5>\n' +
                                     '                  <p>'+item.content+'</p>\n' +
                                     '                  <a href="/details/'+item.Id+'" class="go-icon"></a>\n' +
                                     '                </div>\n' +
                                     '            </div>\n' +
                                     '            </div>\n' +
                                     '           </div>\n' +
                                     '        </div><hr>';
                            $('#blog_item').append(html_data);
                          });
                          obj.count=res.blog_count;
                        }
                    }
                    else{
                      layer.alert(res.msg)
                    }
                }
              })
          }
      });
      menu.init();
<% endblock %>
